<template>
    <div style="margin-top:10px">
      <el-form ref="elForm" :model="formData" :rules="rules" size="medium" label-width="100px">
        <el-form-item label="日期范围" prop="dateRange">
          <el-date-picker type="daterange" v-model="formData.dateRange" format="yyyy-MM-dd"
            value-format="yyyy-MM-dd" :style="{width: '100%'}" start-placeholder="开始日期" end-placeholder="结束日期"
            range-separator="至" clearable></el-date-picker>
        </el-form-item>
        <el-form-item size="large">
          <el-button type="primary" @click="submitForm">提交</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </template>
  <script>
  import request from '@/utils/request'
  export default {
    components: {},
    props: [],
    data() {
      return {
        formData: {
          dateRange: [],
        },
        downParam:{dateRangeStart:null,dateRangeEnd:null},
        rules: {
            dateRange: [{
            required: true,
            type: 'array',
            message: '必须选择日期范围',
            trigger: 'change'
          }],
        },
      }
    },
    computed: {},
    watch: {},
    created() {},
    mounted() {},
    methods: {
      submitForm() {
        this.$refs['elForm'].validate(valid => {
          if (!valid) return
          // TODO 提交表单
          
          this.downParam.dateRangeStart = this.formData.dateRange[0];
          this.downParam.dateRangeEnd = this.formData.dateRange[1];
          
          this.$download.zip('/plasma/statistics/month/create', `月度统计_${this.downParam.dateRangeStart}_${this.downParam.dateRangeEnd}.zip`, {...this.downParam})
          
        })
      },
      resetForm() {
        this.$refs['elForm'].resetFields()
      },
    }
  }
  
  </script>
  <style>
  </style>
  